import 'package:flutter/material.dart';
import '../common/search.dart';
import 'layerpage.dart';
import 'chatpage.dart';
class Board extends  StatefulWidget{
  @override
  _board createState() => _board();
}

class _board extends State<Board>{
  bool isCollpased = true;
  void handleSignInReference(){
    setState(() {
      isCollpased=!isCollpased;
    });
  }
  double screenWidth=0.00, screenHeight=0.00;

  final Duration duration = const Duration(milliseconds: 300);
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    screenHeight = size.height;
    screenWidth = size.width;
    return Scaffold(
      backgroundColor: const Color.fromRGBO(250, 252, 255, 1),
      body: Stack(
        children: [
          menu(context),
          mainBody(context)
        ],
      ),
    );
  }


  Widget menu(context){
    return
      AnimatedPositioned(
        top: !isCollpased ? 0 : -0.2 * screenHeight,
        bottom: !isCollpased ? 0 : -0.2 * screenWidth,
        left: !isCollpased ? 0 : -0.7 * screenWidth,
        right: !isCollpased ? 0 : 0.7 * screenWidth,
        duration: duration,
        child: Align(
            alignment: Alignment.centerLeft,
            child: Padding(
              padding: const EdgeInsets.only(left: 16.0,top: 45),
              child:
              Container(
                width: 250,
//                decoration: BoxDecoration(color: Colors.blueAccent),
                child: AspectRatio(
                    aspectRatio: 40 / 100,
                    child:  Column(
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                          flex: 0,
                          child: Container(
//                              color: Colors.blueGrey,
                              child: Row(
                                mainAxisSize: MainAxisSize.max,
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Container(
                                    height: 55,
                                    width: 55,
                                    decoration: const BoxDecoration(
                                        shape: BoxShape.circle,
                                        boxShadow: [BoxShadow(color: Colors.black12 , offset: Offset(0.0, 0.0), blurRadius: 3.0, spreadRadius: 1)],
                                        image: DecorationImage(image:NetworkImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F4d%2Fd6%2Ff0%2F4dd6f0e142a057fba0bf73235c4167a5.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645886326&t=8394af493534115b20f7fb4f6c327bf6"))
                                    ),
                                  ),
                                  Container(
//                                        padding: EdgeInsets.only(left: 15,top: 0),
                                      margin: const EdgeInsets.only(left: 15),
                                      width: 120,
//                                      color: Colors.red,
                                      child:Column(
                                        mainAxisSize: MainAxisSize.max,
                                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                                        crossAxisAlignment: CrossAxisAlignment.start,
                                        children: const [
                                          Text("Jon json", style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold ,overflow: TextOverflow.ellipsis)),
                                          SizedBox(height: 5,),
                                          Text("11231645987@qq.com", style: TextStyle(color: Color.fromRGBO(160, 160, 160, 1), fontSize: 14,overflow: TextOverflow.ellipsis))
                                      ],
                                    )
                                  )

                                ],
                              )
                          )
                      ),
                      Expanded(
                          flex: 1,
                          child: Container(
                              margin: const EdgeInsets.only(top: 10,bottom: 10),
                              // color: Colors.blueGrey,
                              padding: EdgeInsets.all(10),
                              child:  Column(
                                  mainAxisSize: MainAxisSize.max,
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  ListTile(
                                    // isThreeLine:true,
                                    // subtitle:Text("1"),
                                    title: const Text("Inbox12345646",style: TextStyle(fontWeight: FontWeight.bold,overflow: TextOverflow.ellipsis)),
                                    // subtitle: Text("111"),
                                    // trailing: ClipRRect(child: SizedBox(child: Text("1000",textDirection: ,)),borderRadius: BorderRadius.all(Radius.circular(20)),),
                                    trailing: Container(height: 20,width: 40, alignment: Alignment.center, padding: EdgeInsets.only(left: 5,right: 5), child: const Text("99+",style: TextStyle(color: Colors.white,fontSize: 12)), decoration: BoxDecoration(color: Color.fromRGBO(73, 131, 254, 1), borderRadius: BorderRadius.circular(20.0)),),
                                    leading: const CircleAvatar(child: Icon(Icons.all_inbox,color: Color.fromRGBO(73, 131, 254, 1)),
                                      backgroundColor:  Color.fromRGBO(73, 131, 254, 0),
                                    ),
                                    textColor: Color.fromRGBO(73, 131, 254, 1),
                                  ),
                                  const ListTile(
                                    title: Text("Inbox",style: TextStyle(fontWeight: FontWeight.bold,color: Color.fromRGBO(73, 131, 254, 1))),
                                    leading: CircleAvatar(child: Icon(Icons.class__outlined,color: Color.fromRGBO(73, 131, 254, 1)),
                                      backgroundColor:  Color.fromRGBO(73, 131, 254, 0),
                                    ),
                                    textColor: Color.fromRGBO(73, 131, 254, 1),
                                      selected:true
                                  ),
                                  const ListTile(
                                    title: Text("Inbox",style: TextStyle(fontWeight: FontWeight.bold)),
                                    leading: CircleAvatar(child: Icon(Icons.contact_phone_outlined,color: Color.fromRGBO(73, 131, 254, 1)),
                                      backgroundColor:  Color.fromRGBO(73, 131, 254, 0),
                                    ),
                                    textColor: Color.fromRGBO(73, 131, 254, 1),
                                  ),
                                  const ListTile(
                                    title: Text("Inbox",style: TextStyle(fontWeight: FontWeight.bold)),
                                    leading: CircleAvatar(child: Icon(Icons.drafts_outlined,color: Color.fromRGBO(73, 131, 254, 1)),
                                      backgroundColor:  Color.fromRGBO(73, 131, 254, 0),
                                    ),
                                    textColor: Color.fromRGBO(73, 131, 254, 1),
                                  ),
                                  const ListTile(
                                    title: Text("Inbox",style: TextStyle(fontWeight: FontWeight.bold)),
                                    leading: CircleAvatar(child: Icon(Icons.send_to_mobile,color: Color.fromRGBO(73, 131, 254, 1)),
                                      backgroundColor:  Color.fromRGBO(73, 131, 254, 0),
                                    ),
                                    textColor: Color.fromRGBO(73, 131, 254, 1),
                                  ),
                                  const ListTile(
                                    title: Text("Inbox",style: TextStyle(fontWeight: FontWeight.bold)),
                                    leading: CircleAvatar(child: Icon(Icons.delete_outline,color: Color.fromRGBO(73, 131, 254, 1)),
                                      backgroundColor:  Color.fromRGBO(73, 131, 254, 0),
                                    ),
                                    textColor: Color.fromRGBO(73, 131, 254, 1),
                                  ),
                                  const ListTile(
                                    title: Text("Inbox",style: TextStyle(fontWeight: FontWeight.bold)),
                                    leading: CircleAvatar(child: Icon(Icons.settings_outlined,color: Color.fromRGBO(73, 131, 254, 1)),
                                      backgroundColor:  Color.fromRGBO(73, 131, 254, 0),
                                    ),
                                    textColor: Color.fromRGBO(73, 131, 254, 1),
                                  ),

                                ]
                              )
                          )
                      ),
                      Expanded(
                          flex: 0,
                          child: Container(
//                              color: Colors.red,
                              margin: const EdgeInsets.only(bottom: 45,left: 35),
                              child: Row(children: const <Widget> [
                                Icon(Icons.directions_run,size: 25,color:  Color.fromRGBO(202, 203, 216, 1)),
                                SizedBox(width: 20),
                                Text("Sign Out", style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold,color: Color.fromRGBO(202, 203, 216, 1)),)
                              ],)
                          )
                      ),
  //                    Container(child: const Text("4579",style: TextStyle(fontSize: 22,backgroundColor: Colors.white)),),
  //                    Row(
  //                      mainAxisAlignment: MainAxisAlignment.start,
  //                      children:  const <Widget>[Text("1112221")],
  //                    ),
  //                    Row(
  //                      children:  const <Widget>[Text("1111")],
  //                    ),
  ////                  SizedBox(height: 10),
  ////                  Text("dsdf",style: TextStyle(fontSize: 22))
  //                    Row(
  ////                      mainAxisSize: MainAxisSize.min,
  //                      mainAxisAlignment: MainAxisAlignment.start,
  //                        verticalDirection: VerticalDirection.down,
  //                      children:  const <Widget>[Text("1133311",style: TextStyle(fontSize: 22,backgroundColor: Colors.blueAccent))],
  //                    ),
                    ],
                  ),
                ),
              ),
            )
        ),
      );
  }

  Widget mainBody(context){
    return AnimatedPositioned(
      top: isCollpased ? 0 : 0.1 * screenHeight,
      bottom: isCollpased ? 0 : 0.1 * screenWidth,
      left: isCollpased ? 0 : 0.7 * screenWidth,
      right: isCollpased ? 0 : -0.7 * screenWidth,
      duration: duration,
      child:
        Material(
          animationDuration: duration,
          borderRadius: const BorderRadius.all(Radius.circular(20)),
          shadowColor: Colors.white,
          elevation: 8,

          child: Container(

            decoration: BoxDecoration(
              color: const Color.fromRGBO(255, 255, 255, 1),
              borderRadius: BorderRadius.all(isCollpased ? const Radius.circular(0): const Radius.circular(20)),
              boxShadow: const [BoxShadow(color: Color.fromRGBO(197, 214, 249, 0.4) , offset: Offset(0.0, 0.0), blurRadius: 20.0, spreadRadius: 5)]
            ),
            child: ListView(
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    InkWell(
                      child: Icon(Icons.menu),
                      onTap: (){
                          handleSignInReference();
                          print('111');
                      },
                    ),
                    const Text("title"),
                    const Icon(Icons.settings),
                   
                  ],
                ),
                 Container(
                   // padding: const EdgeInsets.only(left: 10, right: 10, ),
                  decoration: const BoxDecoration(
                    color: Color.fromRGBO(250, 252, 255, 1.0)
                  ),
                   child:   Column(
                     children: [
                       Container(
                         margin: const EdgeInsets.only(top: 10.0),
                         child: Search(),
                       ),
                       Container(
                         margin: const EdgeInsets.only(top: 10.0),
                         child: ImagePage(),
                       ),
                       Container(
                         margin: const EdgeInsets.only(top: 10.0),
                         child: ChatPage(),
                       )
                     ],
                   ),
                 )
//                 Container(
//                     decoration: const BoxDecoration(
//                         color: Color.fromRGBO(243, 248, 255, 1.0)
//                     ),
//                     child:  ListView(
//                       children: [
//                         Column(
//                           children:  const [
//                             Padding(padding: EdgeInsets.only(left: 40.0,top: 10.0,right: 20.0,bottom: 0)),
// //             搜索框
//                             Search(),
// //            图片层
//                             ImagePage(),
// //            聊天层
//                             ChatPage(),
//
//                           ],
//                         )
//                       ],
//                     )

              ],
            )
        ),
      ),
    );
  }

}
